<!--权限管理-->
<template>
    <div class="mainDesc">
        <div class="returnUpBack"><a @click="returnUp"><span>返回用户列表</span><em class="iconfont back"></em></a></div>
        <div class="descLeft">
            <div class="descTit">角色信息</div>
            <p>用户登录名：<span>{{userName}}</span></p>
            <p>用户姓名：<span>{{name}}</span></p>
            <p>机构名称：<span>{{orgName}}</span></p>
        </div>
        <div class="descRight">
            <a-tabs defaultActiveKey="1" @change="changeTab">
                <a-tab-pane v-if="perms.findUserRoles" tab="用户角色管理" name="1" id="1" key="1">
                    <div style=" margin-top:16px;">
                        <a-transfer
                                :dataSource="totalRoles"
                                :targetKeys="roleKeys"
                                :render="item=>item.label + ' - ' + item.description"
                                @change="handleChange" :titles='titles' filterable :filterMethod="filterMethod"
                                :listStyle="{'height':'610px',width:'45%'}"></a-transfer>
                    </div>
                </a-tab-pane>
                <a-tab-pane v-if="perms.findUserResources" tab="用户已分配资源" name="2" id="2" key="2">
                    <div style="height:610px;overflow: auto; background: #f7f8fb; margin-top:16px; width: 80%">
                        <a-row style="margin-left: 5%">
                            <a-tree
                                    :autoExpandParent="autoExpandParent" @expand="onExpand"
                                    :expandedKeys="expandedKeys"
                                    :treeData='getUserResourceTree'></a-tree>
                        </a-row>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </div>
        <div class="spinBox" v-if="spinning">{{spinText}}</div>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    import Util from '@/libs/util';
    export default {
        name: 'user_auth',
        data () {
            return {
                title: true,
                currentTabName: '1',
                perms: {},
                userId: '',
                userName: '',
                name: '',
                orgName: '',
                array: [ 10, 20, 30, 40 ],
                titles: [ '未拥有角色', '已拥有角色' ],
                totalRoles: [],
                roleKeys: [],
                columns2: [
                    {
                        type: 'index',
                        title: '序号',
                        align: 'center',
                        width: 70
                    },
                    {
                        key: 'name',
                        title: '角色名称',
                        align: 'center'
                    },
                    {
                        key: 'orgName',
                        title: '组织机构名称',
                        align: 'center'
                    },
                    {
                        key: 'limited',
                        title: '允许登录SDMP',
                        align: 'center',
                        render: ( h, params ) => {
                            const row = params.row
                            return h ('span', {}, stateFilter (row.validStatus, 'allowStatus'))
                        }
                    },
                    {
                        key: 'createTime',
                        title: '创建时间',
                        align: 'center'
                    }
                ],
                autoExpandParent:true,
                expandedKeys: [],
                checkedKeys: [],
                selectedKeys: [],
                page: {
                    currentPage: 1,
                    pageSize: 10
                },
                spinText:'请稍后...',
                spinning:false,
            }
        },
        computed: {
            ...mapState ({
                pageVal: state => state.user.role.page
            }),
            queryPara () {
                return this.$store.state.user.queryPara
            },
            getUserResourceTree () {
                return this.$store.state.user.resourceTree
            }
        },
        methods: {
            onExpand (expandedKeys) {
                this.expandedKeys = expandedKeys
                this.autoExpandParent = false
            },
            /**
             * Function    : initPermission
             * Description : 初始化权限码
             * Input       : none
             * Return      : none
             */
            initPermission () {
                this.perms = {
                    findUserRoles: this.hasPermission ('sysuser:findUserRoles'),
                    addUserRoles: this.hasPermission ('sysuser:addUserRoles'),
                    delUserRoles: this.hasPermission ('sysuser:delUserRoles'),
                    findUserResources: this.hasPermission ('sysuser:findUserResources')
                }
            },

            /**
             * Function    : init
             * Description : 初始化列表
             * Return      : none
             */
            init () {
                this.userId = this.$route.query.id.toString ()
                this.userName = this.$route.query.userName.toString ()
                this.name = this.$route.query.name.toString ()
                this.orgName = this.$route.query.orgName.toString ()
                let para = {userId: this.userId}

                if (this.currentTabName === '1') {
                    this.$store.dispatch ('findUserRolesAct', para).then (data => {
                        this.totalRoles = data.data
                        this.totalRoles.forEach (item => {
                            item.title = item.label
                        })
                        this.roleKeys = data.targetKeys
                    })
                } else {
                    // 加载角色用户信息
                    this.$store.dispatch ('findUserResourcesAct', para).then(res=>{
                        this.expandedKeys = Util.expandedKeysAll(res.data,[])
                    })
                }
            },

            /**
             * Function    : returnUp
             * Description : 页面返回上一级
             * Input       : none
             * Return      : none
             */
            returnUp () {
                this.$router.push ({
                    name: 'userInfo',
                    query: this.queryPara
                })
            },

            /**
             * Function    : changeTab
             * Description : 切换tab页面
             * Input       : name  tab中指定名称
             * Return      : none
             */
            changeTab ( name ) {
                this.currentTabName = name
                this.init ()
            },

            /**
             * Function    : changePage
             * Description : 切换页码
             * Input       : val
             * Return      : none
             */
            changePage ( val ) {
                this.page.currentPage = val
                this.init ()
            },

            /**
             * Function    : changePageSize
             * Description : 切换每页条数
             * Input       : vm
             * Return      : none
             */
            changePageSize ( vm ) {
                this.page.pageSize = vm
                this.page.currentPage = 1
                this.init ()
            },

            /**
             * Function    : renderRole
             * Description : 角色对外显示处理
             * Input       : item
             * Return      :
             */
            renderRole ( item ) {
                return item.label + ' - ' + item.description
            },

            /**
             * Function    : handleChange
             * Description : 用户角色的新增和删除
             * Input       : newTargetKeys direction moveKeys
             * Return      : none
             */
            handleChange ( newTargetKeys, direction, moveKeys ) {
                // 更新
                let roleIds = moveKeys.join (',')
                let para = {userId: this.userId, roleIds}
                let handleMethod
                if (direction === 'right') {
                    // 新增
                    handleMethod = 'addUserRoleAct'
                    if (!this.perms.addUserRoles) {
                        this.$message.error ('不具备新增用户角色权限')
                        return
                    }
                } else {
                    // 刪除
                    handleMethod = 'delUserRoleAct'
                    if (!this.perms.delUserRoles) {
                        this.$message.error ('不具备删除用户角色权限')
                        return
                    }
                }
                this.spinning = true
                this.$store.dispatch (handleMethod, para).then (data => {
                    if (data.code === 0) {
                        // 成功
                        this.$message.success (data.message)
                        this.roleKeys = newTargetKeys
                    } else {
                        this.$message.error (data.message)
                    }
                    this.spinning = false
                })
            },

            /**
             * Function    : filterMethod
             * Description : 搜索过滤函数
             * Input       : data query
             * Return      : bol true false
             */
            filterMethod ( data, query ) {
                return data.label.indexOf (query) > -1 || data.description.indexOf (query) > -1
            }
        },
        created () {

            //初始化页面功能权限
            this.initPermission ()
            /**
             * 初始化的tab数据加载的处理
             */
            if (!this.perms.findUserRoles && this.perms.findUserResources) {
                this.currentTabName = '2'
            }
            this.init ()
        }
    }
</script>
<style rel="stylesheet/less" lang="less">
    @import "~assets/nycss.less";
</style>
<style type="text/css" scoped>
    .item {
        list-style: none;
        display: inline-block;
        margin-right: 40px;
        text-align: left;
    }

    .name {
        display: inline-block;
        font-weight: bold;
    }

    .cont {
        display: inline-block;
        color: #333;
    }
</style>
